<!doctype html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />  
        <title>测试</title>  
        <link rel="stylesheet" href="./css/index.css" />  
        <link rel="stylesheet" href="./css/index_1.css" />  
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>  
        <script type="text/javascript" src="script/ys.js"></script>  
    </head>  
    <body>  
        <div class="free-upload">  
H5页面            <p>  
                上传您的约会照片，上传图片  
            </p>  
            <div class="free-upload-photo">  
                <span id="photo_img"></span>  
                <input type="file" id="photo" onchange="start_upload(this)"/>  
            </div>  
        </div>  
        <img src="" id="csimg" width="200" height="200"/>  
    </body>  
    <script>  
        function start_upload(obj){  
             if(!isCanvasSupported){  
                console.log("2222");  
             }else{  
                compress(event, function(base64Img){  
                    $("#csimg").attr("src",base64Img);  
                    console.log(base64Img);  
                    // 如需保存  或 把base64转成图片  ajax提交后台处理  
                    // 我这里采用ajax方式 自己封装的   
                    $.post('http://www.ttc.com/card.php/upload/base64UploadImages',{'base64Img':base64Img,'phpsid':'9mtnc4p33ibsnhl0ep533jgoi5'},function(date){  
                        console.log(JSON.stringify(date));  
                    });  
                });  
             }  
        }


        //判断是否存在画布  
        function isCanvasSupported() {  
            var elem = document.createElement('canvas');  
            return !!(elem.getContext && elem.getContext('2d'));  
        }  
          
        //压缩方法  
        function compress(event, callback) {  
            if ( typeof (FileReader) === 'undefined') {  
                console.log("当前浏览器内核不支持base64图标压缩");  
                //调用上传方式  不压缩  
            } else {  
                try {  
                    var file = event.currentTarget.files[0];  
                     if(!/image\/\w+/.test(file.type)){     
                            alert("请确保文件为图像类型");    
                            return false;    
                     }   
                    var reader = new FileReader();  
                    reader.onload = function (e) {  
                    var image = $('<img/>');  
                    image.load(function () {  
                    console.log("开始压缩");  
                    var square = 700;  
                    var canvas = document.createElement('canvas');  
                    canvas.width = square;  
                    canvas.height = square;  
                    var context = canvas.getContext('2d');  
                    context.clearRect(0, 0, square, square);  
                    var imageWidth;  
                    var imageHeight;  
                    var offsetX = 0;  
                    var offsetY = 0;  
                    if (this.width > this.height) {  
                      imageWidth = Math.round(square * this.width / this.height);  
                      imageHeight = square;  
                      offsetX = - Math.round((imageWidth - square) / 2);  
                    } else {  
                      imageHeight = Math.round(square * this.height / this.width);  
                      imageWidth = square;  
                      offsetY = - Math.round((imageHeight - square) / 2);  
                    }  
                    context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);  
                    var data = canvas.toDataURL('image/jpeg');    //使用toDataUrl将图片转换成jpeg的格式,不要把图片压缩成png，因为压缩成png后base64的字符串可能比不转换前的长！

                        //压缩完成执行回调  
                       callback(data);  
                    });  
                    image.attr('src', e.target.result);  
                    };  
                    reader.readAsDataURL(file);  
                } catch(e) {  
                    console.log("压缩失败!");  
                    //调用上传方式  不压缩  
                }  
            }  
        }  
  
          
    </script>  
</html>  